<template>
  <view class="more-goods-wrap">
    <customHeader class="more-goods-wrap__title" :title="pageTitle" />
    <scroll-view
      :scrollY="true"
      :refresher-enabled="true"
      refresher-default-style="none"
      refresher-background="none"
      :refresher-triggered="refresherTriggered"
      @scrolltolower="handleScrolltolower"
      @refresherRefresh="handleRefresherRefresh"
      class="more-goods-scroll"
    >
      <view class="more-goods">
        <goodsCard
          v-for="item in source"
          @click="handleToDetail"
          :key="item.id"
          :info="item"
        />
        <view v-if="source.length" class="more-goods-footer">
          更多商品，敬请期待~
        </view>
      </view>
    </scroll-view></view
  >
</template>

<script>
import Taro from "@tarojs/taro";
import goodsCard from "../components/goods-card";
import customHeader from "@/components/custom-header";
import { moreGoods } from "@/libs/api/exchange-store";
const FIRST_PAGE = 1;
const PER_PAGE = 10;
export default {
  components: { goodsCard, customHeader },
  data() {
    return {
      cate_id: undefined,
      page: FIRST_PAGE,
      refresherTriggered: false,
      pagination: {},
      source: [],
      pageTitle: ""
    };
  },
  computed: {
    /**是否禁止触底加载 */
    isNotToLower() {
      const { current_page = 0, total_pages = 0 } = this.pagination;
      return !!current_page && current_page >= total_pages;
    },
    /**是否为首页 */
    isFirstPage() {
      return this.page === FIRST_PAGE;
    }
  },
  onLoad({ title, id }) {
    this.cate_id = id;
    this.pageTitle = title;
  },
  onShow() {
    this.page = FIRST_PAGE;
    this.handleGetMoreGoods();
  },
  methods: {
    handleToDetail(goods) {
      const { id, goods_category_id } = goods;
      Taro.navigateTo({
        url: `/pages/exchange-store/goods-detail/index?id=${id}&cate_id=${goods_category_id}&ismore=1`
      });
    },
    /**下拉刷新 */
    async handleRefresherRefresh() {
      this.refresherTriggered = true;
      this.page = FIRST_PAGE;
      await this.handleGetMoreGoods();
      this.refresherTriggered = false;
    },
    /**触底刷新 */
    handleScrolltolower() {
      if (this.isNotToLower || this.isLoading) return;
      this.handleGetMoreGoods();
    },
    async handleGetMoreGoods() {
      if (this.isLoading) return;
      this.isLoading = true;
      const {
        data: { data = [], meta: { pagination = {} } = { pagination: {} } }
      } = await moreGoods({
        id: this.cate_id,
        page: this.page,
        per_page: PER_PAGE
      });
      this.isLoading = false;
      this.isFirstPage
        ? (this.source = data)
        : (this.source = [...this.source, ...data]);
      console.log(this.isFirstPage, this.source.length);
      if (!this.isNotToLower) this.page += 1;
      this.pagination = pagination;
    }
  }
};
</script>

<style lang="scss">
@import "@/assets/scss/tools.scss";
.more-goods-wrap {
  height: 100vh;
  display: flex;
  flex-direction: column;
  .more-goods {
    padding: 44px 30px 64px;
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    &-scroll {
      flex: 1;
      overflow-y: hidden;
    }
    &-footer {
      margin-top: 32px;
      width: 100%;
      text-align: center;
      @include base-text(40px, 28px, #c0c4cc, 400);
    }
    .goods-card {
      margin-bottom: 32px;
      &:nth-child(odd) {
        margin-right: 18px;
      }
    }
  }
  &__title {
    background-color: #ffffff;
  }
}
</style>
